<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link type="text/css" rel="stylesheet" href="./css/froala_blocks.css">
</head>

<body>
  <section class="fdb-block">
    <div class="container">
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius dolor purus, et eleifend lectus congue id. Quisque tempor metus ligula, lacinia rutrum enim ultrices eget. Etiam vitae sem massa. Pellentesque vestibulum ex lectus, nec cursus
        tortor sollicitudin ut. Nullam volutpat ligula ut odio condimentum, sit amet facilisis nulla tempus. Morbi et hendrerit diam, sit amet luctus orci. Quisque egestas, lacus ac iaculis accumsan, quam eros tempus sem, ac ultrices felis eros porttitor
        nibh. Nunc condimentum mauris dapibus, pretium ipsum ac, lacinia nisi. Nulla facilisi.</p>

      <br>
      <h2>Button styles</h2>
      <p>
        <a href="#" class="btn btn-primary">Button</a>
        <a href="#" class="btn btn-outline-primary">Button Empty</a>
        <a href="#" class="btn btn-dark">Button Black</a>
        <a href="#" class="btn btn-dark btn-outline-dark">Button Black Empty</a>

        <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
          <a href="#" class="btn btn-light">Button White</a>
          <a href="#" class="btn btn-light btn-outline-light">Button White Empty</a>
        </div>
      </p>

      <br>
      <h2>Buttons with shadows</h2>
      <p>
        <a href="#" class="btn btn-shadow">Button</a>
        <a href="#" class="btn btn-outline-primary btn-shadow">Button Empty</a>
        <a href="#" class="btn btn-dark btn-shadow">Button Black</a>
        <a href="#" class="btn btn-dark btn-outline-dark btn-shadow">Button Black Empty</a>
        <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
          <a href="#" class="btn btn-light btn-shadow">Button White</a>
          <a href="#" class="btn btn-light btn-outline-light btn-shadow">Button White Empty</a>
        </div>
        <a href="#">Link</a>
      </p>

      <br>
      <h2>Rounded buttons</h2>
      <p>
        <a href="#" class="btn btn-primary">Button</a>
        <a href="#" class="btn btn-outline-primary btn-round">Button Empty</a>
        <a href="#" class="btn btn-dark btn-round">Button Black</a>
        <a href="#" class="btn btn-dark btn-outline-dark btn-round">Button Black Empty</a>
        <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
          <a href="#" class="btn btn-light btn-round">Button White</a>
          <a href="#" class="btn btn-light btn-outline-light btn-round">Button White Empty</a>
        </div>
      </p>

      <br>
      <h1>Heading 1 + P</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <h2>Heading 2 + P</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <h3>Heading 3 + P</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <h4>Heading 4 + P</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <h5>Heading 5 + P</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <h6>Heading 6 + P</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </section>
</body>

</html>
